<template>
	<view class="out-box">
		<view class="hader">
			<view class="user">
					<image class="user_sculpture" src="../../static/images/铺铺转.png"></image>
					<view class="user_name">铺铺转</view>
			</view>
		</view>
		<!-- 下方店铺选择框 -->
		<view class="main">

			<!-- 联系客服 -->
			<view class="customer" style="border-radius: 10rpx 10rpx 0 0;border-bottom: 1px solid rgb(221, 221, 221);" @tap="toyhxy(1)">
				<i><image class="customer_one" src="../../static/images/关于我们.png"></image></i>
				<view class="customer_text">用户协议</view>
				<i><image class="customer_two" src="../../static/images/4.png"></image></i>
			</view>
			<view class="customer" style="border-bottom: 1px solid rgb(221, 221, 221);" @tap="toyhxy(2)">
				<i><image class="customer_one" src="../../static/images/隐私.png"></image></i>
				<view class="customer_text">隐私协议</view>
				<i><image class="customer_two" src="../../static/images/4.png"></image></i>
			</view>
			<view class="customer" style="border-radius: 0 0 10rpx 10rpx;">
				<i><image class="customer_one" src="../../static/images/当前版本.png"></image></i>
				<view class="customer_text">版本号</view>
				<view class="customer_version">V1.0.6</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
const toyhxy = (num)=>{
	console.log('1',1)
	uni.navigateTo({
		url: '/pages/toyhxy/toyhxy?num=' + num
	});
}
</script>
<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		background-color: rgb(236, 234, 234);
		width: 750rpx auto;
		.hader{
			width: 100%;
			// margin-left: 1%;
			height: 310rpx;
			// border: 1px solid black;	
			display: flex;
			justify-content:center;	
			// text-align: center;
			// padding-top: 15rpx;	
			font-family: Arial, Helvetica, sans-serif;
			font-weight: 600;
			color: #F5F5F5;
			// background: linear-gradient(to bottom,rgb(255,115,66),rgb(255,193,172));	
			.user{
				// border: 1px solid black;
				width: 720rpx;
				height: 310rpx;
				// border: 1px solid black;
				margin:0 auto;
					.user_sculpture{
						width: 130rpx;
						height: 130rpx;
						margin:100rpx 0 0 280rpx;
						border-radius: 50%;
					}
					.user_name{
						width: 420rpx;
						height: 130rpx;
						// border: 1px solid pink;
						margin:10rpx 0 0  300rpx;
						// line-height: 130rpx;
						font-size: 32rpx;
						color: rgb(99, 95, 95);
						font-weight: 500;
						// color: #df6262;
					}
			}
		}
		.main{
			width: 100%;
			// margin-left: 1%;
			// border: 1px solid black;	
			.customer{
				width: 700rpx;
				height: 100rpx;
				margin:0 auto;
				background-color: #fff;
				// border: 1px solid black;
				// border-radius: 20rpx;
				display: flex;
				.customer_one{
					width:56rpx;
					height: 56rpx;
					margin: 22rpx 0 0 26rpx;
				}
				.customer_text{
					width: 300rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 30rpx;
					font-weight: 600;
					margin-left: 26rpx;		
				}
				.customer_two{
					width: 40rpx;
					height: 40rpx;
					margin: 30rpx 0 0 220rpx;
				}
				.customer_version{
					width: 100rpx;
					height: 40rpx;
					margin: 36rpx 0 0 170rpx;
					font-size: 26rpx;
					// background-color: pink;
					color: rgb(164, 160, 160);
				}
			}
		}
	}
</style>
